<template>
    <div class="sales-profit-chart" ref="chartRef"></div>
</template>

<script>
import { defineComponent, ref, onMounted, watch, computed } from '@vue/composition-api'
import * as echarts from 'echarts'
import { useAppointmentState } from '@/components/report/hooks/useAppointmentState.js'


export default defineComponent({
    name: 'SalesProfitGril',
    props: {
        visibleData: {
            type: Array,
            default: () => []
        }
    },
    setup(props) {

        const {
            fromTypes,
        } = useAppointmentState()

        const chartRef = ref(null)
        const chartInstance = ref(null)

        const initChart = () => {
            if (!chartRef.value) return

            chartInstance.value = echarts.init(chartRef.value)
            updateChart()
        }

        const legendData = computed(() => {
            return fromTypes.value == 'yy' ? ['消耗', '成本'] : ['销售', '毛利']
        })

        const updateChart = () => {
            if (!chartInstance.value) return

            const dates = props.visibleData.map(item => item.timestr)
            const amount_re = props.visibleData.map(item => item.amount_re || 0)
            const profit_re = fromTypes.value == 'yy' ? props.visibleData.map(item => item.cost_re || 0) : props.visibleData.map(item => item.profit_re || 0)

            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#E5E5E5',
                    borderWidth: 1,
                    padding: [10, 15],
                    textStyle: {
                        color: '#333',
                        fontSize: 12,
                        lineHeight: 20
                    },
                    formatter: function (params) {
                        let result = `{bold|${params[0].axisValue}}\n`;
                        params.forEach((item, index) => {
                            result += `${item.marker} ${item.seriesName}: {bold|¥${item.value}}${index < params.length - 1 ? '\n' : ''}`;
                        });
                        return result;
                    },
                    rich: {
                        bold: {
                            fontWeight: 'bold',
                            color: '#333'
                        }
                    }
                },
                legend: {
                    data: legendData.value,
                    top: '-4px',
                    left: 'center',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#999999',
                        fontSize: 12
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '5%',
                    top: '25px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    boundaryGap: true,
                    axisLine: {
                        lineStyle: {
                            color: '#E5E5E5'
                        }
                    },
                    axisLabel: {
                        color: '#999999',
                        interval: 'auto',
                        rotate: 45,
                        margin: 20,
                        formatter: function (value) {
                            return value.substring(5);
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#E5E5E5'
                        }
                    },
                    axisLabel: {
                        color: '#999999',
                        formatter: (value) => {
                            return '¥' + value
                        }
                    }
                },
                series: [
                    {
                        name: legendData.value[0],
                        data: amount_re,
                        type: 'bar',
                        barWidth: props.visibleData.length <= 3 ? '40' : '20%',
                        barGap: '30%',
                        barCategoryGap: props.visibleData.length <= 3 ? '30%' : '20%',
                        lineStyle: {
                            color: '#4080FF'
                        },
                        itemStyle: {
                            color: '#4080FF'
                        }
                    },
                    {
                        name: legendData.value[1],
                        data: profit_re,
                        type: 'bar',
                        barWidth: props.visibleData.length <= 3 ? '40' : '20%',
                        barGap: '30%',
                        barCategoryGap: props.visibleData.length <= 3 ? '30%' : '20%',
                        lineStyle: {
                            color: '#95D13C'
                        },
                        itemStyle: {
                            color: '#95D13C'
                        }
                    }
                ]
            }

            chartInstance.value.setOption(option)
        }

        watch(() => props.visibleData, () => {
            updateChart()
        }, { deep: true })

        onMounted(() => {
            initChart()
            // Handle window resize
            window.addEventListener('resize', () => {
                chartInstance.value?.resize()
            })
        })

        return {
            chartRef
        }
    }
})
</script>

<style scoped>
.sales-profit-chart {
    width: 100%;
    height: 36vh;
}
</style>
